<template>
  <div class="app-container">
    <router-link :to="{path:addUrl}" class="sidebar-nav-link">
      <el-button type="primary" size="lg" style="margin: 10px 20px 20px">增加</el-button>
    </router-link>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="用户名" align="center">
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>

      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.realName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电话" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.tel }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="状态" width="90" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.state | statusFilter">{{ scope.row.state | statusFormat }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="角色" width="130">
        <template slot-scope="scope">
          <span :type="scope.row.roleCode | statusFilter">{{ scope.row.roleCode | statusFormat1 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="创建时间" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="220">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="info" size="mini" @click="updateData(scope.row.id)">修改</el-button>
            <template v-if="roles === 'superAdmin'">
              <el-button type="warning" size="mini" @click="showPass(scope.$index)">重置密码</el-button>
              <el-button type="danger" size="mini" :disabled="scope.row.verifyFlag | verifyButton1" @click="showState(scope.$index)">{{ scope.row.state | statusButton }}</el-button>
            </template>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="重置密码" :visible.sync="passState" width="400px" center @close="onClose1">
      <el-form ref="form1" :model="form1" label-width="80px" :rules="rules1">
        <el-form-item label="密码" prop="password">
          <el-input v-model="form1.password" placeholder="请输入8-16位的密码" show-password />
        </el-form-item>
        <el-form-item label="验证密码" prop="aPassword">
          <el-input v-model="form1.aPassword" placeholder="请再次输入密码" show-password />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updatePass('form1')">提交</el-button>
        <el-button type="primary" @click="passState = false">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog title="启用/停用" :visible.sync="stateState" width="400px" center>
      <el-form ref="form" :model="form2" label-width="40px">
        <el-form-item label="" prop="state">
          <el-radio-group v-model="form2.state">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateState('form')">提交</el-button>
        <el-button type="primary" @click="stateState = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, publish, resetPassword } from '@/api/manage'
import { mapGetters } from 'vuex'

export default {
  name: 'ManageList',
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'warning'
      }
      return statusMap[status]
    },
    statusFormat(status) {
      const statusMap = {
        1: '正常',
        0: '停用'
      }
      return statusMap[status]
    },
    statusFormat1(status) {
      const statusMap = {
        editor: '内容编辑',
        checker: '审核员',
        superAdmin: '超级管理员',
        admin: '管理员'
      }
      return statusMap[status]
    },
    statusButton(status) {
      const statusMap = {
        1: '停用',
        0: '启用'
      }
      return statusMap[status]
    },
    verifyButton1(status) {
      const statusMap = {
        1: false,
        0: true,
        2: true
      }
      return statusMap[status]
    }
  },
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (value.length < 8 || value.length > 16) {
          callback(new Error('请输入8-16位的密码'))
        } else {
          callback()
        }
      }
    }
    const validatePass2 = (rule, value, callback) => {
      const that = this
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== that.form1.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      stateState: false,
      countState: false,
      passState: false,
      addUrl: '/system/manageAdd',
      list: null,
      listLoading: true,
      index: '',
      username: '',
      form1: {
        id: '',
        password: '',
        aPassword: ''
      },
      form2: {
        id: '',
        state: ''
      },
      rules1: {
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        aPassword: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      },
      rules2: {
        state: [
          { required: true, message: '请选启用或禁用', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  role: '',
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      list().then(response => {
        this.list = response.data
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
        this.$message({
          message: '加载失败', type: 'warning'
        })
      })
    },
    updateData(id) {
      this.$router.push({ name: 'ManageUpdate', query: { id: id }})
    },
    showState(index) {
      this.index = index
      this.form2.state = this.list[this.index].state
      this.stateState = true
    },
    onClose1() {
      this.form1.id = ''
      this.form1.password = ''
      this.form1.aPassword = ''
    },
    updateState(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const that = this
          that.form2.id = this.list[this.index].id
          if (this.form2.state === '1') {
            publish(this.form2).then(response => {
              if (response.result === 1) {
                this.list[this.index].state = this.form2.state
                this.stateState = false
                this.$message({
                  message: '提交成功', type: 'success'
                })
              } else {
                this.stateState = false
                this.$message({
                  message: '提交失败', type: 'warning'
                })
              }
            }).catch(() => {
              this.stateState = false
              this.$message({
                message: '提交失败', type: 'warning'
              })
            })
          } else {
            publish(this.form2).then(response => {
              if (response.result === 1) {
                this.list[this.index].state = this.form2.state
                this.stateState = false
                this.$message({
                  message: '提交成功', type: 'success'
                })
              } else {
                this.stateState = false
                this.$message({
                  message: '提交失败', type: 'warning'
                })
              }
            }).catch(() => {
              this.stateState = false
              this.$message({
                message: '提交失败', type: 'warning'
              })
            })
          }
        } else {
          return false
        }
      })
    },
    showPass(index) {
      this.index = index
      this.passState = true
    },
    updatePass(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form1.id = this.list[this.index].id
          resetPassword(this.form1).then(response => {
            if (response.result === 1) {
              this.passState = false
              this.$message({
                message: '提交成功', type: 'success'
              })
            } else {
              this.passState = false
              this.$message({
                message: '提交失败', type: 'warning'
              })
            }
          }).catch(() => {
            this.passState = false
            this.$message({
              message: '提交失败', type: 'warning'
            })
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

